<template>
  <div class="form-rate form-components">
    <div v-if="$attrs.readonly" class="form-readonly"></div>
    <el-rate
      v-model="formValue"
      v-bind="$attrs"
      v-on="$listeners"
      :colors="[$attrs.color, $attrs.color, $attrs.color]"
      :void-color="$attrs.voidColor"
    />
  </div>
</template>

<script>
export default {
  name: "form-rate",
  model: {
    prop: "value", // 绑定的值，通过父组件传递
    event: "update"
  },
  props: {
    value: {
      type: [String, Number],
      default: ""
    }
  },

  computed: {
    formValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("update", val);
      }
    }
  }
};
</script>

<style lang="scss">
.form-rate {
  min-height: 36px;
  line-height: 36px;
  display: flex;
  align-items: center;
}
</style>
